new Vue({
 el:'#animeFilter',
 data:{
   sortArr:['创建时间','播出时间','番剧名称','热度值'],
   animeList:[],
   animeListResult:[],
   tagsList:[],
   yearList:[],
   monthList:[],
   seasonList:[],
   areaList:[],
   pages:[],
   p:1,
   l:null,
   year:'不限',
   season:'不限',
   tag:'不限',
   area:'不限',
   typeIndex:getUrlParams().type||0,
   sortDivType:1,
 },
 methods:{
   readFile(){
     this.$http.get('./moongoDB/animes').then(response =>{
       let res = response.body;
       if(res){
        this.animeList = res.concat();    
        this.filterFile();   
       }
     },response=>{
       console.log('请求数据失败！');  
     });
   },
   filterFile(){
      var animes = this.animeList.concat();
      //获取年份
      var yearArr = [];
        // 提取年份数组
      this.animeList.forEach(item=>{yearArr.push(item.year)});
        // 取消重复项
      yearArr = [...new Set(yearArr)];
        // 排序
      this.yearList = yearArr.sort(oneSortBy()).reverse();
      this.yearList.unshift('不限');
      
      
      // 筛选年份
      if (this.year !== '不限'){
        animes = animes.filter(item=>(item.year == this.year));
      }


      // 获取季节
      var monthArr = [];var seasonArr = [];  
        // 提取月份  
      animes.forEach(item=>{monthArr.push(item.month);})  
        // 取消重复项      
      monthArr = [...new Set(monthArr)];
        // 排序
      monthArr = monthArr.sort(oneSortBy());
        // 季节判断
      monthArr.forEach(item=>{
        if(item < 4 && item > 0){
          seasonArr.push(1)
        }else if (item < 7 && item > 3){
          seasonArr.push(2)
        }else if(item < 10 && item > 6){
          seasonArr.push(3)
        }else{
          seasonArr.push(4)
        }})  
        // 取消重复项
      seasonArr = [...new Set(seasonArr)];
        // 排序
      this.seasonList = seasonArr.sort(oneSortBy());
      this.seasonList.unshift('不限');

      // 筛选季节
      if (this.season !== '不限'){
        animes = animes.filter(item=>(
        item.month < (this.season * 3 + 1) 
        && item.month > (this.season * 3 - 3)
        ));
      }
      

      // 获取标签
      var tagArr = [];
        // 提取标签
      animes.forEach(item=>{tagArr.push(item.tags)})
        // 多个 数组 合并 成 一个数组
      tagArr = Object.values(tagArr).reduce((a,b) => [...a, ...b], []);
        // 取消重复数据   
      this.tagsList = [...new Set(tagArr)];
       // 排序
      sortChinese(this.tagsList);
      this.tagsList.unshift('不限');
      
      

      // 筛选标签
      if (this.tag !== '不限'){
        animes = animes.filter(item=>(item.tags.indexOf(this.tag) > -1));
      }
      

      // 获取地区
      var areaArr = [];
        // 提取地区
      animes.forEach(item=>{areaArr.push(item.area)})
       // 取消重复数据   
      this.areaList = [...new Set(areaArr)];
      this.areaList.unshift('不限');


      // 筛选地区
      if (this.area !== '不限'){
        animes = animes.filter(item=>(item.area == this.area));
      }
      
      // 排序方式   
      
      if (this.typeIndex == 0){
        animes = animes.reverse();
      }else if (this.typeIndex == 1){
        
      }else if (this.typeIndex == 2){
        animes = animes.sort(dateSortBy("year","month","day","title"));       
      }else if (this.typeIndex == 3){
        animes = animes.sort(dateSortBy("year","month","day","title")).reverse(); 
      }else if (this.typeIndex == 4){
        sortChineseObj(animes,'title');
      }else if (this.typeIndex == 5){
        sortChineseObj(animes,'title');
        animes = animes.reverse();
      }else if (this.typeIndex == 6){
        animes = animes.sort(valueSortBy("zValue","title"));
      }else if (this.typeIndex == 7){
        animes = animes.sort(valueSortBy("zValue","title")).reverse();
      }else{}

      this.l = animes.length;
      if(this.sortDivType == 1){
        this.pages.length = Math.ceil(animes.length / 5);
        this.animeListResult = animes.slice(5*(this.p-1),5*this.p);
      }else{
        this.pages.length = Math.ceil(animes.length / 18);
        this.animeListResult = animes.slice(18*(this.p-1),18*this.p);
      }
      
   },
   toIndexClick(){
     window.location.href="/";
   },
   toAnimeInfoClick(id){
    window.open(`/animeInfo?id=${id}`,'_blank');
   },
   yearSelectClick(year){
      this.year = year;
      this.p = 1;
      this.filterFile();
   },
   seasonSelectClick(season){
      this.season = season;
      this.p = 1;
      this.filterFile();
   },
   tagSelectClick(tag){
     this.tag = tag;
     this.p = 1;
     this.filterFile();
  },
  areaSelectClick(area){
    this.area = area;
    this.p = 1;
    this.filterFile();
  },
  sortBtnClick(index){
    if(this.typeIndex == index * 2){this.typeIndex += 1;}   
    else{this.typeIndex = index * 2;}      
    this.p = 1;
    this.readFile(); 
  },
  detailSortTypeClick(){
    if(!$('.detail').hasClass('dedetailActive')){
      $('.detail').addClass('detailActive');
      $('.cut').removeClass('cutActive');
      this.sortDivType = 1;
      this.p = 1;
      this.filterFile();
    }
  },
  cutSortTypeClick(){
    if(!$('.cut').hasClass('cutActive')){
      $('.detail').removeClass('detailActive');
      $('.cut').addClass('cutActive');
      this.sortDivType = 2;
      this.p = 1;
      this.filterFile();
    }
  },
  pageClick(index){
    this.p = index + 1;
    this.filterFile();
  }
  
 },

 created(){
   this.readFile(); 
   
   // 标题筛选
   $('.title').html(`
   <a v-if="year == '不限'&&season == '不限'&&tag == '不限'&&area == '不限'">所有番剧</a>
   <a v-else-if="year == '不限'&&tag == '不限'&&area == '不限'">所有 <b>{{season*3-2}}-{{season*3}}</b> 月番剧</a>
   <a v-else-if="year == '不限'&&season == '不限'&&area == '不限'">所有 <b>{{tag}}</b> 类番剧</a>
   <a v-else-if="year == '不限'&&season == '不限'&&tag == '不限'">所有 <b>{{area}}</b> 番剧</a>
   <a v-else-if="season == '不限'&&tag == '不限'&&area == '不限'"><b>{{year}}</b> 年所有番剧</a>
   <a v-else-if="tag == '不限'&&area == '不限'"><b>{{year}}</b> 年 <b>{{season*3-2}}-{{season*3}}</b> 月番剧</a>
   <a v-else-if="season == '不限'&&area == '不限'"><b>{{year}}</b> 年 <b>{{tag}}</b> 类番剧</a>
   <a v-else-if="season == '不限'&&tag == '不限'"><b>{{year}}</b> 年 <b>{{area}}</b> 番剧</a>
   <a v-else-if="year == '不限'&&area == '不限'"><b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{tag}}</b> 类番剧</a>
   <a v-else-if="year == '不限'&&tag == '不限'"><b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{area}}</b> 番剧</a>
   <a v-else-if="year == '不限'&&season == '不限'"><b>{{tag}}</b> 类 <b>{{area}}</b> 番剧</a>
   <a v-else-if="year == '不限'"><b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{tag}}</b> 类 <b>{{area}}</b> 番剧</a>
   <a v-else-if="season == '不限'"><b>{{year}}</b> 年 <b>{{tag}}</b> 类 <b>{{area}}</b> 番剧</a>
   <a v-else-if="tag == '不限'"><b>{{year}}</b> 年 <b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{area}}</b> 番剧</a>
   <a v-else-if="area == '不限'"><b>{{year}}</b> 年 <b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{tag}}</b> 类番剧</a>
   <a v-else><b>{{year}}</b> 年 <b>{{season*3-2}}-{{season*3}}</b> 月 <b>{{tag}}</b> 类 <b>{{area}}</b> 番剧</a>`
   
   )
   // 年份
   $('.year').append(`<span :class="yearItem==year?'active':''" v-for="(yearItem,index) in yearList" @click="yearSelectClick(yearItem)">{{yearItem}}</span>`);
   // 季份
   $('.season').append(`<span :class="seasonItem==season?'active':''" v-for="(seasonItem,index) in seasonList"  @click="seasonSelectClick(seasonItem)"><a v-if="seasonItem == '不限'">不限</a><a v-else>{{seasonItem*3-2}}-{{seasonItem*3}}月</a></span>`)
   // 类型
   $('.type').append(`<span :class="tagItem==tag?'active':''" class="tag" v-for="(tagItem,index) in tagsList" @click="tagSelectClick(tagItem)">{{tagItem}}</span>`);
   //地区
   $('.area').append(`<span :class="areaItem==area?'active':''" v-for="(areaItem,index) in areaList" @click="areaSelectClick(areaItem)">{{areaItem}}</span>`)
   // 结果
   $('.result b').html(`{{ l }}`)
   // 排序
   $('.orientation_type').html(`<div :class="[ (typeIndex-1)/2 == index ? 'bottomActive':'',typeIndex/2 == index ? 'topActive':'']" v-for="(item,index) in sortArr" @click="sortBtnClick(index)"><span>{{item}}</span></div>
   <div class="orientationIconGroup"><div class="detail detailActive" @click="detailSortTypeClick"></div><div class="cut" @click="cutSortTypeClick"></div>
   <div class="pageDiv"><li v-for="(item,index) in pages" :class="index + 1 == p?'active':''" @click="pageClick(index)">{{index+1}}</li></div></div>`)
   // 无内容显示
   $('.animeList').before(`<div class="noData" v-if="animeListResult.length == 0">
   <b>没有筛选结果，请重新选择筛选条件！！</b>
   </div>`)
   // 番剧
   $('.animeList').html(`
   <div v-if="sortDivType == 1">
   <div class="animeList_item" v-for="(item,index) in animeListResult" :key="index">
   <div class="left">
    <div class="img" @click="toAnimeInfoClick(item.id)">
        <img :src="item.imgSrc_F" alt="">
    </div>
   </div>
   <div class="right">
      <div class="animeTitle" @click="toAnimeInfoClick(item.id)">{{item.title}}</div>
      <div class="animeArea">地区：{{item.area}}</div>
      <div class="animeTags">类型：
        <div v-for="(arr,index2) in item.tags" :key="index2">{{arr}}</div>
      </div>
      <div class="animeTime">播出时间：{{item.year}}年{{item.month}}月{{item.day}}日</div>
      <div class="animeContent">简介：{{item.content}}</div>
      <div class="animeType">
        <b>状态：</b>
        <div v-if="item.update == 0">已完结，全 <b>{{item.episodes.length}}</b> 话</div>
        <div v-else>更新中，更新至第 <b>{{item.episodes.length}}</b> 话</div>
      </div>
   </div>
   <div class="hot">
      <div>
        <div>热度值</div>
        <div class="value" v-if="item.zValue/(10e7) >= 1">{{parseFloat(item.zValue/(10e7)).toFixed(1)}} 亿</div>
        <div class="value" v-else>{{parseFloat(item.zValue/(10e3)).toFixed(1)}} 万</div>
      </div>
   </div>
</div>
</div>
<div v-else>
  <div class="animeList_item2" v-for="(item,index) in animeListResult" :key="index">
    <div class="img" @click="toAnimeInfoClick(item.id)">
      <img :src="item.imgSrc_F" />
      <div v-if="item.update == 0" class="imgBottom">全 <b>{{item.episodes.length}}</b> 话</div>
      <div v-else class="imgBottom">更新至第 <b>{{item.episodes.length}}</b> 话</div>
    </div>
    <div class="title">
      <div class="titlehidden" @click="toAnimeInfoClick(item.id)">{{item.title}}</div>
      <div class="animeTags2">
        <div :class="'tags ' + (index2==0?'red ':' ') + (index2==1?'blue':' ') + (index2==2?'green ':' ') + (index2==3?'purple ':' ')" v-for="(arr,index2) in item.tags" :key="index2">{{arr}}</div>
      </div>
    </div>
  </div>
  
</div>`)
 },
 updated(){   
    
 },
 
});